<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教室列表-教练</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script>

</head>
<body>
<!-- 顶部开始 -->
<div class="container">
    <div class="logo"><a href="./index.html">健身房管理系统 V1.1</a></div>
    <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
    <ul class="layui-nav right" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">${logUsername}</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="${pageContext.request.contextPath}/coach/toOneselfPage.action">个人中心</a></dd>
                <dd><a href="${pageContext.request.contextPath}/coach/toCoachcourseSchedule.action">课程表</a></dd>
                <dd><a href="${pageContext.request.contextPath}/member/outlogin.action">退出</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/index.jsp">前台首页</a></li>
    </ul>
</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<div class="wrapper">
    <!-- 左侧菜单开始 -->
    <div class="left-nav">
        <div id="side-nav">
            <ul id="nav">
                <li class="list" current>
                    <a href="${pageContext.request.contextPath}/index.jsp">
                        <i class="iconfont">&#xe761;</i>
                        欢迎页面
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>
                <%-- 课程表信息模块--%>
                <li class="list">
                    <a href="javascript:;">
                        <i class="iconfont">&#xe70b;</i>
                        课程模块
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="${pageContext.request.contextPath}/coach/toCoursePage.action">
                                <i class="iconfont">&#xe6a7;</i>
                                课程列表
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="layer.msg('敬请期待！')">
                                <i class="iconfont">&#xe6a7;</i>
                                课程安排
                            </a>
                        </li>
                    </ul>
                </li>
                <%-- 教室信息查看与预定管理--%>
                <li class="list">
                    <a href="javascript:;">
                        <i class="iconfont">&#xe70b;</i>
                        教室模块
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="${pageContext.request.contextPath}/coach/toClassroomPage.action">
                                <i class="iconfont">&#xe6a7;</i>
                                教室列表
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="layer.msg('敬请期待！')">
                                <i class="iconfont">&#xe6a7;</i>
                                教室安排
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 左侧菜单结束 -->
    <!-- 右侧主体开始 -->
    <div class="page-content">
        <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <form class="layui-form" action="">
                <div class="layui-form-pane" style="text-align: center;">
                    <div class="layui-form-item" style="display: inline-block;">
                        <label class="layui-form-label xbs768">查询教室：</label>
                        <div class="layui-input-inline xbs768">
                            <input type="text" id="classroomtype" placeholder="请输入教室类别" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline xbs768">
                            <input type="text" id="min" placeholder="请输入教室最小容量" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline xbs768">
                            <input type="text" id="max" placeholder="请输入教室最大容量" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" id="classroomName" placeholder="请输入教室名" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline" style="width:80px">
                            <%-- type="button"，form不会自动提交，没有的话会自动提交Ajax就不管用。--%>
                            <button class="layui-btn" id="coachFindClassroom" type="button"><i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </div>
                </div>
            </form>
            <div id="table">
                <xblock>
                    <span class="layui-btn">所有教室</span><span class="x-right" style="line-height:40px" id="counts"></span>
                    <span class="x-right" style="line-height:40px">共有数据:${classroomInfo.list.size()}条</span>
                </xblock>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>教室名</th>
                        <th>容纳人数</th>
                    </tr>
                    </thead>
                    <tbody id="tb">
                    <c:forEach items="${classroomInfo.list}" var="classroom">
                        <tr>
                            <td>${classroom.classroomname}</td>
                            <td>${classroom.maxmem}</td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
                <%--分页--%>
                <div id="bottom">
                    <div>
                        <nav aria-label="..." style="text-align:center;">
                            <ul class="pagination layui-laypage" style="white-space: nowrap">
                                <%--                            向前翻页--%>
                                <li style="display: inline-block"><a href="javascript:ajaxsplit(${classroomInfo.prePage})" aria-label="Previous">&laquo;</a></li>

                                <c:forEach begin="1" end="${classroomInfo.pages}" var="i">
                                    <c:if test="${classroomInfo.pageNum==i}">
                                        <li style="display: inline-block">
                                            <a href="javascript:ajaxsplit(${i})"
                                               style="background-color: #DFDFDF">${i}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${classroomInfo.pageNum!=i}">
                                        <li style="display: inline-block">
                                            <a href="javascript:ajaxsplit(${i})">${i}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                                <%--                            向后翻页--%>
                                <li style="display: inline-block"><a href="javascript:ajaxsplit(${classroomInfo.nextPage})" aria-label="Previous">&raquo;</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- 右侧内容框架，更改从这里结束 -->
        </div>
    </div>
    <!-- 右侧主体结束 -->
</div>
<!-- 中部结束 -->
<!-- 页面动态效果 -->
<script>
    //分页
    function ajaxsplit(page) {
        //判断输入框是否为空，为空则普通Ajax分页查询。不为空则带条件的Ajax。
        var a1 = $("#classroomtype").val();
        var a2 = $("#min").val();
        var a3 = $("#max").val();
        var a4 = $("#classroomName").val();
        console.log("a1:"+a1+",a2:"+a2+",a3:"+a3.length);
        if (a1==0 && a2==0 && a3.length==0 && a4.length==0){
            $.ajax({
                //不带条件的分页
                url:"${pageContext.request.contextPath}/coach/ClassroomSplit.action",
                data:{"page":page},
                type:"post",
                success:function () {
                    //更新id=table部分内容
                    $("#table").load("http://localhost:8080/GamnasiumSystem/coachclassroom_list.jsp #table");
                }
            });
        }else {
            //带条件的分页
            $.ajax({
                url:"${pageContext.request.contextPath}/coach/findClSplit.action",
                data:{
                    page:page,
                    classroomtype:a1,
                    min:a2,
                    max:a3,
                    classroomName:a4
                },
                type:"post",
                success:function () {
                    //更新id=table部分内容
                    $("#table").load("http://localhost:8080/GamnasiumSystem/coachclassroom_list.jsp #table");
                }
            });
        }
    }
    //多条件搜索，用Ajax发送请求接收请求显示在表格
    $("#coachFindClassroom").click(function (){
        $.ajax({
            url: "${pageContext.request.contextPath}/coach/coachFindClassroom.action",
            type: "post",
            data:{
                classroomtype:$("#classroomtype").val(),
                min:$("#min").val(),
                max:$("#max").val(),
                classroomName: $("#classroomName").val()
            },
            success:function (){
                //更新id=table部分内容
                $("#table").load("http://localhost:8080/GamnasiumSystem/coachclassroom_list.jsp #table");
            },
            error:function (){
                console.log("error");
            }
        });
    });
</script>

</body>
</html>
